﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1400"
        destroy-on-close
        :close-on-click-modal="false"
        :before-close="handleBeforeClose"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <div class="steps-view">
                <!-- <div class="steps-view-line">
                    <div class="w-119"></div>
                    <img :src="stepStatus.complete" class="w-32" />
                    <div class="steps-line-blue"></div>
                    <img :src="stepStatus.ing" class="w-24-4" />
                    <div class="steps-line-ash"></div>
                    <img :src="stepStatus.wait" class="w-24-4" />
                    <div class="steps-line-ash"></div>
                    <img :src="stepStatus.wait" class="w-24-4" />
                    <div class="steps-line-ash"></div>
                    <img :src="stepStatus.wait" class="w-32-4" />
                    <div class="w-119"></div>
                </div>-->
                <!-- <div class="steps-view-text">
                    <div class="steps-uning">1、门店已下单</div>
                    <div class="steps-ing">2、接单处理中</div>
                    <div class="steps-uning">3、物料已出库</div>
                    <div class="steps-uning">4、发货配送中</div>
                    <div class="steps-uning">5、已完成</div>
                </div>-->
            </div>

            <el-collapse v-model="activeNames" class="title">
                <div class="collapse-container">
                    <div class="collapse-header" @click="toggleCollapse">
                        <span>基础信息</span>
                        <div style="display: flex;align-items: center;">
                            <span class="expand-text">{{ isCollapsed ? '展开' : '收起' }}</span>
                            <img
                                v-if="isCollapsed"
                                class="icon-img"
                                src="https://oss.jtmckj.com/pc/images/pay/arrow-bt.png"
                            />
                            <img
                                v-else
                                class="icon-img"
                                src="https://oss.jtmckj.com/pc/images/pay/arrow-top.png"
                            />
                        </div>
                    </div>
                    <div v-show="!isCollapsed" class="collapse-content1">
                        <!-- 要展开/收起的内容 -->
                        <el-row>
                            <el-col :span="8">
                                <el-form-item
                                    label-width="120px"
                                    label="订单类型:"
                                >{{entityObj.taskOrderTypeDesc}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label-width="120px"
                                    label="订单编号:"
                                >{{entityObj.orderCode}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label-width="120px"
                                    label="业务时间:"
                                >{{entityObj.orderDate}}</el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item
                                    label-width="120px"
                                    label="要货单位:"
                                >{{entityObj.storeName}}</el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="collapse-container">
                    <div class="collapse-header" @click="toggleCollapse2">
                        <span>收货详情</span>
                        <div style="display: flex;align-items: center;">
                            <span class="expand-text">{{ isCollapsed2 ? '展开' : '收起' }}</span>
                            <img
                                v-if="isCollapsed2"
                                class="icon-img"
                                src="https://oss.jtmckj.com/pc/images/pay/arrow-bt.png"
                            />
                            <img
                                v-else
                                class="icon-img"
                                src="https://oss.jtmckj.com/pc/images/pay/arrow-top.png"
                            />
                        </div>
                    </div>

                    <div v-show="!isCollapsed2" class="collapse-content">
                        <el-row>
                            <el-col :span="24" class="basic-table">
                                <!-- default-expand-all  -->
                                <el-table
                                    stripe
                                    :data="entityObj.orderItems"
                                    :border="false"
                                    style="width: 100%;border-radius: 8px;"
                                    :row-class-name="setRowClass"
                                    @row-click="rowClickYh"
                                    default-expand-all
                                    class="subtable"
                                    show-summary
                                    :summary-method="getSummaries"
                                    @sort-change="handleSortChange"
                                    @selection-change="selectionChange"
                                >
                                    <el-table-column type="index" min-width="55" fixed />
                                    <!-- <el-table-column type="selection" width="50"></el-table-column> -->
                                    <el-table-column
                                        label="物料名称"
                                        prop="materialName"
                                        min-width="140"
                                        align="left"
                                    >
                                        <template #default="scope">
                                            <el-tooltip placement="top" style="width: 80%">
                                                <template #content>{{scope.row.materialCode}}</template>
                                                <div
                                                    v-if="scope.row.materialImages && scope.row.materialImages.length > 0"
                                                    style="color: #318cf2;"
                                                    @click="handlePreview(scope.row.materialImages)"
                                                >{{scope.row.materialName}}</div>
                                                <div v-else>{{scope.row.materialName}}</div>
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="规格"
                                        prop="materialSpecs"
                                        min-width="120"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="单位"
                                        prop="unitName"
                                        min-width="70"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="供应商"
                                        prop="supplierName"
                                        min-width="100"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="预计收货数量"
                                        prop="receiveQty"
                                        min-width="100"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="已收数量"
                                        prop="alreadyTaskQty"
                                        min-width="100"
                                        align="center"
                                    />
                                    <el-table-column label="收货照片" min-width="200">
                                        <template #default="scope">
                                            <span
                                                v-for="(rowItem,index) in scope.row.taskOrderItems"
                                                :key="index"
                                            >
                                                <el-image
                                                    v-for="(item,index) in rowItem.taskFiles"
                                                    :key="index"
                                                    style="width: 50px; height: 40px;margin: 4px;"
                                                    :src="item"
                                                    :zoom-rate="1.2"
                                                    :max-scale="7"
                                                    :min-scale="0.2"
                                                    :preview-src-list="[item]"
                                                    preview-teleported="true"
                                                    :z-index="9999"
                                                    fit="cover"
                                                />
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="存在待审核"
                                        prop="taskOrderStatusDesc"
                                        min-width="100"
                                        align="center"
                                    />
                                    <el-table-column
                                        label="操作"
                                        fixed="right"
                                        align="center"
                                        min-width="140"
                                    >
                                        <template #default="scope">
                                            <el-button-group>
                                                <el-button
                                                    text
                                                    type="primary"
                                                    size="small"
                                                    v-if="scope.row.taskOrderStatus==2"
                                                    @click="opAudit(scope.row, scope.$index)"
                                                >审核</el-button>

                                                <el-button
                                                    text
                                                    type="primary"
                                                    size="small"
                                                    v-if="scope.row.taskOrderItems.some(p=>p.status==1)"
                                                    @click="opAntiAuditTask(scope.row, scope.$index)"
                                                >反审核</el-button>
                                            </el-button-group>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-collapse>
        </el-form>
        <template #footer>
            <div class="left-panel"></div>
            <div class="right-panel">
                <el-button @click="handleBeforeClose">取 消</el-button>
                <el-button
                    v-if="mode != 'show'"
                    type="primary"
                    :loading="isSaveing"
                    @click="submit()"
                >全部审核</el-button>
            </div>
        </template>
    </full-screen-dialog>
    <!-- 审核详情 -->
    <audit-detail-dialog
        v-if="auditDetailSave"
        ref="auditDetailDialog"
        @splitOrder="splitOrder"
        @saveOrder="saveOrder"
        @getSupplierDesc="getSupplierDesc"
        @closed="receiveDetailSave = false"
    ></audit-detail-dialog>

    <!-- 预览组件 -->
    <el-image-viewer
        v-if="showImage"
        @close="closeViewer"
        :hide-on-click-modal="true"
        :url-list="srcList"
    />
</template>

<script>
import auditDetailDialog from "./auditDetail";
import tool from "@/utils/tool";
export default {
    components: {
        auditDetailDialog,
    },
    emits: ["success", "closed"],
    data() {
        return {
            stepStatus: {
                complete:
                    "https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/complete.png",
                ing: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/ing.png",
                wait: "https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/not-started.png",
            },
            //预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            activeNames: [], // activeNames: ["2", "3"],
            tableRowClassName: "warning-row",
            tableRowClassName1: "success-row",
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                purchaseProtocolId: 0,
                purchaseProtocolCode: "",
                purchaseProtocolName: "",
                status: 1,
                crName: "",
                crDate: "",
                supplier: {},
                protocolDate: [],
                purchaseUnityName: "",
                remarks: "",
                protocolFile: "",
                purchaseProtocolItems: [],
                giveOrderItems: [],
            },
            //预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            materialSave: false,
            auditDetailSave: false,
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                purchaseProtocolName: [
                    { required: true, type: "string", message: "请填写" },
                ],
                purchaseUnityName: [
                    { required: true, type: "string", message: "请填写" },
                ],
                supplier: [
                    { required: true, type: "object", message: "请填写" },
                ],
                protocolDate: [
                    { required: true, type: "array", message: "请填写" },
                ],
                crName: [{ required: true, type: "string", message: "请填写" }],
                crDate: [{ required: true, type: "string", message: "请填写" }],
                materialSpecs: [
                    { required: true, type: "string", message: "请填写" },
                ],
                purchaseProtocolItems: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                ],
            },
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseSaleType: [],
            suppliers: [],
            giveSuppliers: [],
            selectmaterialState: false,
            tempOrder: [],
            selectionTempRow: {},
            delTempItems: [],
            isCollapsed: true, // 初始状态为收起
            isCollapsed2: false, // 初始状态为收起
            isCollapsed3: false, // 初始状态为收起
            isCollapsed4: true, // 初始状态为收起
            selected: [], // 当前选中行
            yhSelect: [],
            zsSelect: [],
            itemsData: [],
            querySuppliers: [],
            selectionRows: [],
        };
    },
    computed: {
        totalQty() {
            let applyOrderItems = this.entityObj.applyOrderItems;
            let purchaseQty = 0;
            applyOrderItems?.map((element) => {
                element.purchases?.map((t) => (purchaseQty += t.qty));
            });
            return purchaseQty;
        },
        totalAmount() {
            let applyOrderItems = this.entityObj.applyOrderItems;
            let totalAmount = 0;
            applyOrderItems?.map((element) => {
                console.log(11111);
                console.log(element.purchases);
                element.purchases?.map((t) => {
                    const price =
                        t.suppliers
                            .find((z) => z.orgId == t.supplierId)
                            ?.purchaseSaleItems?.find(
                                (p) => p.purchaseSaleType == t.purchaseSaleType
                            )?.price ?? 0;
                    totalAmount += t.qty * price;
                });
            });
            return totalAmount;
        },
        hasSomeFieldValue() {
            console.log(11111);
            var exists = this.itemsData.some((item) => item.materialQuality);
            console.log("exists", exists);
            return exists;
        },
    },
    methods: {
        selectable() {
            return false;
        },
        //图片预览
        handlePreview(materialImages) {
            if (!materialImages || materialImages.length == 0) {
                return;
            }
            this.previewUrl = materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image
        },
        closeViewer() {
            console.log(111);
            this.showImage = false;
        },
        checkStoreDetail(row, event) {
            this.$refs.tempTable.clearSelection();
            // 判断是否已经选中
            const isSelected = this.selected.includes(row);
            // 根据当前状态切换选中状态
            if (isSelected) {
                this.$refs.tempTable.toggleRowSelection(row, false); // 取消选中
            } else {
                this.$refs.tempTable.toggleRowSelection(row, true); // 选中行
                this.selectionTempRow = row;
            }
            //this.$refs.tempTable.toggleRowSelection(row);
            //this.selectionTempRow = row;
        },
        handleSelectionChange(selection) {
            this.selected = selection;
            if (selection.length > 1) {
                this.$refs.tempTable.clearSelection();
                this.$refs.tempTable.toggleRowSelection(selection.pop());
            }
            this.selectionTempRow = this.selected[0];
        },
        //获取供应商信息
        getSupplierDesc(purchases, suppliers) {
            return purchases
                .map(
                    (supplier) =>
                        `${supplier.supplierName}/${supplier.totalQty}`
                )
                .join(", ");
        },
        //收货审核
        opAudit(row, index) {
            row.orderCode = this.entityObj.orderCode;
            row.orderDate = this.entityObj.orderDate;
            row.storeName = this.entityObj.storeName;
            row.taskOrderTypeDesc = this.entityObj.taskOrderTypeDesc;
            row.itemIndex = index;
            this.auditDetailSave = true;
            this.$nextTick(() => {
                this.$refs.auditDetailDialog.setData(row);
                this.$refs.auditDetailDialog.open("Task");
            });
        },
        //反审核
        async opAntiAuditTask(row) {
            if (!row.taskOrderItems.some((p) => p.status == 1)) {
                this.$message.error("请选择已审核的订单");
                return;
            }

            const taskOrderItemIds = row.taskOrderItems
                .filter((p) => p.status == 1)
                .map((p) => p.taskOrderItemId);
            try {
                this.isSaveing = true;
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "task-order/anti-audit-task-order",
                    { taskOrderItemIds: taskOrderItemIds }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$emit("fatherMethod");
                    this.isSaveing = false;
                    this.setData(this.entityObj);
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
        },
        toggleCollapse() {
            this.isCollapsed = !this.isCollapsed; // 切换展开/收起状态
        },
        toggleCollapse2() {
            this.isCollapsed2 = !this.isCollapsed2; // 切换展开/收起状态
        },
        toggleCollapse3() {
            this.isCollapsed3 = !this.isCollapsed3; // 切换展开/收起状态
        },
        toggleCollapse4() {
            this.isCollapsed4 = !this.isCollapsed4; // 切换展开/收起状态
        },
        handleBeforeClose() {
            // this.$confirm("信息未保存,确定要关闭吗？", "提示", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning",
            // })
            // .then(() => {

            // })
            // .catch(() => {
            //     // 用户点击了取消按钮，不执行关闭
            // });

            this.$emit("fatherMethod");
            this.visible = false;
        },
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //表单提交方法
        async submit() {
            let taskOrderItems = [];
            this.entityObj.orderItems.forEach((p) => {
                const tItems = p.taskOrderItems.filter((p) => p.status == 2);
                if (tItems && tItems.length > 0) {
                    taskOrderItems.push(...tItems);
                }
            });

            this.isSaveing = true;
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "task-order/audit-task-order",
                    taskOrderItems
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$emit("fatherMethod");
                    this.isSaveing = false;
                    this.visible = false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
        },
        //表单注入数据
        async setData(data) {
            const returnValue = await this.$API.auth.GetProcessApi.get(
                `task-order/order-task-detail/${data.taskOrderType}/${data.orderId}/0`,
                {}
            );
            if (returnValue.status == 200) {
                this.entityObj = data;
                this.entityObj.orderItems = returnValue.response;
            }
        },
        //保存审核订单明细
        async saveOrder(data) {
            this.setData(this.entityObj);
        },
        handleQuantityChange(row, data) {
            let totalQty = 0;
            data.purchases.forEach((p) => (totalQty += p.qty));
            if (row.qty < 0) {
                this.$nextTick(() => {
                    row.qty = 0;
                });
                this.$message.error("采购数量不能小于0");
            }

            if (totalQty > data.qty) {
                this.$nextTick(() => {
                    row.qty -= totalQty - data.qty;
                });
                this.$message.error("采购数量不能大于要货数量");
            }
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) =>
                    Number(item[column.property])
                );

                if (
                    column.property == "qty" ||
                    column.property == "totalAmount"
                ) {
                    if (!values.every((item) => isNaN(item))) {
                        const total = values.reduce((a, b) => a + b, 0);
                        sums[index] = total;
                    }
                }
            });
            return sums;
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["PurchaseSaleType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsPurchaseSaleType = returnValue.response.find(
                        (p) => p.code == "PurchaseSaleType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        // 点击行 要货清单
        rowClickYh(row) {
            console.log(row);
            this.yhSelect = [row];
        },
        // 点击行 赠送清单
        rowClickZs(row) {
            console.log(row);
            this.zsSelect = [row];
        },
        // 动态样式 选中效果
        setRowClass({ row }) {
            //终止
            if (row.taskOrderStatus == 0) {
                return "selected-row-color-grey";
            }
            return "";
        },
        setRowClassZs({ row }) {
            if (this.zsSelect.includes(row)) {
                return "selected-row-color";
            }
            return "warning-row";
        },
        resetSearch() {
            this.queryList = {};
        },
        handleSearch() {
            this.itemsData = this.entityObj.applyOrderItems;
            if (this.queryList.supplierId) {
                this.itemsData = this.itemsData.filter((person) =>
                    person.purchases.some(
                        (purchase) =>
                            purchase.supplierId == this.queryList.supplierId
                    )
                );
            }
        },
        //排序
        handleSortChange(sort) {
            console.log("排序字段:", sort.prop);
            console.log("排序方式:", sort.order);

            this.itemsData.sort((a, b) => {
                if (sort.order === "ascending") {
                    return a[sort.prop] > b[sort.prop] ? 1 : -1;
                } else if (sort.order === "descending") {
                    return a[sort.prop] < b[sort.prop] ? 1 : -1;
                }
                return 0;
            });
        },
    },
    async mounted() {
        await this.initOptions();
    },
};
</script>

<style scoped lang="scss">
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table .el-table__row .warning-row .hover-row td {
    background-color: #dae8f7;
}
::v-deep .el-table__row .warning-row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
    background-color: #f5f7fa;
    transition: none;
}
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
    background-color: #dae8f7;
    transition: none;
}
::v-deep .basic-table .el-table .el-table__cell.is-center {
    // background-color: transparent;
}
::v-deep {
    .el-table .selected-row-color {
        background-color: #b8dcff !important;
    }
    .el-table .selected-row-color-grey {
        color: #000000 !important;
        text-decoration: line-through; /* 删除线 */
    }
    .el-table--enable-row-hover
        .el-table__body
        tr.selected-row-color:hover
        > td {
        background-color: #b8dcff !important;
    }
    .el-table__body-wrapper
        .el-table__body
        tr.selected-row-color.hover-row
        > td {
        background-color: #b8dcff !important;
    }
    .el-table__fixed-body-wrapper
        .el-table__body
        tr.selected-row-color.hover-row
        > td {
        background-color: #b8dcff !important;
    }
    .el-table__body-wrapper
        .el-table__body
        tr.selected-row-color.hover-row
        > .el-table__row--striped {
        background-color: #b8dcff !important;
    }
    .el-table--enable-row-transition .el-table__body td.el-table__cell {
        background-color: transparent;
        transition: none;
    }
    .el-table__body tr.hover-row > td.el-table__cell {
        background-color: transparent;
        transition: none;
    }
    .el-table__body .el-table__row--striped.selected-row-color td {
        background-color: #b8dcff !important;
    }
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-form-item {
    margin-bottom: 8px !important;
}
.div-label {
    font-size: 16px;
    text-align: left;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #666666;
    width: 60px;
}

.steps-view {
    height: 70x;
    margin-top: -15px;
    margin-bottom: 8px;
}
.steps-view-line {
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.steps-line-blue {
    height: 6px;
    width: 20%;
    background-color: #308bf2;
    opacity: 0.2;
}
.steps-line-ash {
    height: 6px;
    width: 20%;
    background-color: #e6e6e6;
}
.steps-view-text {
    height: 38px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.steps-uning {
    width: 272px;
    text-align: center;
    color: #999999;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}
.steps-ing {
    width: 272px;
    text-align: center;
    color: #308bf2;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
}
.w-119 {
    width: 119px;
}
.w-32 {
    width: 32px;
}
.w-24-4 {
    width: 24px;
    margin: 4px;
}
.w-32-4 {
    width: 32px;
    padding: 4px;
}
.add-material {
    width: 80px;
    height: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    width: 80px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
}

.collapse-container {
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    padding: 10px 10px 10px 0;
    margin-bottom: 10px;
}

.collapse-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 5px;
    padding-left: 0;
    font-weight: bold;
    font-size: 16px;
}

.expand-text {
    color: #308bf2; /* Element UI 的蓝色 */
    font-size: 14px;
}
.icon-img {
    width: 16px;
    height: 10px;
    margin-left: 5px;
}
.collapse-content {
    padding: 10px;
}

.collapse-content1 {
    padding: 10px;
    background: #f2f2f2;
}

/* 过渡动画样式 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.6s ease;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
}
::v-deep(.subtable .el-table__header th) {
    background-color: #e6e6e6 !important;
}
::v-deep(.subtable .el-table__expanded-cell) {
    background-color: #f5f7fa !important;
}
::v-deep(.custom-table) {
    margin: 0 auto;
    width: 80% !important;
}

::v-deep(.custom-table .el-table__header th) {
    background-color: #ffffff !important;
}
::v-deep(.custom-table .el-table__cell) {
    background-color: #ffffff !important;
}
::v-deep(.custom-table .el-table__cell.is-leaf) {
    border: none !important;
}
</style>

